﻿<html>
  <head>
    <title>Sciter CSS support map</title>
    <style>
      body { font: 10pt sans-serif; }
      td { font: 10pt sans-serif; vertical-align:top;}
    </style>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <p>Features specific to Sciter:</p>
  <ul>
    <li>
      <div>Gradient backgrounds, see <a href="#background-color-attribute">background-color</a> attribute definition.</div></li>
    <li>
      <div>Extended image fill, see <a href="#background-position-attribute">background-position</a> and background-repeat attribute definitions.</div></li>
    <li>
      <div><a href="http://sciter.com/docs/flex-flow/flex-layout.htm">flex length units and flow</a></div></li>
    <li>
      <div><a href="#foreground-position-attribute">Foreground images</a>.</div></li>
    <li>
      <div><a href="#hit-margin">hit-margin</a> attribute.</div></li>
    <li>
      <div><code>@include &quot;mime-type&quot; url(...) [media types list];</code> - inclusion of scripts from CSS. <br/>Example, this: <code>&lt;style&gt; @include &quot;text/tiscript&quot; url(script.tis) screen; &lt;/style&gt;</code><font face="Courier New"><br/></font>is an equivalent of <code>&lt;script type=&quot;text/tiscript&quot; src=&quot;script.tis&quot; /&gt;</code> except of media type condition.</div></li></ul>
  <h3>List of CSS properties supported by Sciter</h3>
  <div>
    <table border="1" bordercolor="#fff2cc" cellspacing="0">
      <tbody><tr>
        <td rowspan="24" valign="top"><strong>Font and paragraph properties</strong></td>
        <td nowrap align="right"><strong>font</strong></td>
        <td>
          <div>specifies up to six of the following space-delimited property values. Alternatively, sets or retrieves the six listed text fonts.</div>
          <div>See: <a href="http://www.w3.org/TR/CSS1#font">Cascading Style Sheets, level 1</a></div>
          <div></div>
          <div>In h-smile core engine the <em>font</em> also supports names of following system fonts:</div>
          <ul>
            <li><var>system</var> - default system UI font used for input elements;</li>
            <li><var>system-menu</var> - system menu font;</li>
            <li><var>system-caption</var> - window caption font;</li>
            <li><var>system-status</var> - statusbar and tooltip system font.</li></ul>
          <div>Note: To be in effect these font names can be used only in the <em>font</em> attribute - in font-family such names are ignored. Rationale of this is simple, declaration <font face="Courier New">font:system-menu;</font> for example is a shortcut of four attributes of the font - font-family, font-size, font-weight and font-variant.</div></td></tr>
      <tr>
        <td nowrap align="right"><strong>font-family</strong></td>
        <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td nowrap valign="middle">family-name</td>
              <td>Any of the available font families installed in the system. For example, Times, Helvetica, Zapf-Chancery, Western, or Courier.</td></tr>
            <tr>
              <td nowrap valign="middle">generic-name</td>
              <td>Any of the following font families: serif, sans-serif, cursive, fantasy, or monospace.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#font-family">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>font-size</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td nowrap valign="middle">absolute-size</td>
              <td>Set of keywords that indicate predefined font sizes. Named font sizes scale according to the user's font setting preferences. Possible values include the following: xx-small, x-small, small, medium, large, x-large, xx-large.</td></tr>
            <tr>
              <td nowrap valign="middle">relative-size</td>
              <td>Set of keywords that are interpreted as relative to the font size of the parent object. Possible values include the following: larger, smaller.</td></tr>
            <tr>
              <td nowrap valign="middle">length</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see the <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td nowrap valign="middle">percentage</td>
              <td>Integer, followed by a percent (%). The value is a percentage of the parent object's font size. In Internet Explorer 3.0, the value is calculated as a percentage of the default font size.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#font-size">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>font-style</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>normal</td>
              <td>Default. Font is normal.</td></tr>
            <tr>
              <td>italic</td>
              <td>Font is italic.</td></tr>
            <tr>
              <td>oblique</td>
              <td>Font is italic.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#font-style">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>font-weight</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>normal</td>
              <td>Default. Font is normal.</td></tr>
            <tr>
              <td>bold</td>
              <td>Font is bold.</td></tr>
            <tr>
              <td>bolder</td>
              <td>Font is heavier than regular bold.</td></tr>
            <tr>
              <td>lighter</td>
              <td>Font is lighter than normal.</td></tr>
            <tr>
              <td>100</td>
              <td>Font is at least as light as the 200 weight.</td></tr>
            <tr>
              <td>200</td>
              <td>Font is at least as bold as the 100 weight and at least as light as the 300 weight.</td></tr>
            <tr>
              <td>300</td>
              <td>Font is at least as bold as the 200 weight and at least as light as the 400 weight.</td></tr>
            <tr>
              <td>400</td>
              <td>Font is normal.</td></tr>
            <tr>
              <td>500</td>
              <td>Font is at least as bold as the 400 weight and at least as light as the 600 weight.</td></tr>
            <tr>
              <td>600</td>
              <td>Font is at least as bold as the 500 weight and at least as light as the 700 weight.</td></tr>
            <tr>
              <td>700</td>
              <td>Font is bold.</td></tr>
            <tr>
              <td>800</td>
              <td>Font is at least as bold as the 700 weight and at least as light as the 900 weight.</td></tr>
            <tr>
              <td>900</td>
              <td>Font is at least as bold as the 800 weight.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#font-variant">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>letter-spacing</strong></td>
              <td>N/A</td></tr>
            <tr><td nowrap align="right" bgcolor="#ffffdd"><b>font-rendering-mode</b></td><td>Defines glyph positioning and anti-aliasing modes:
						<ul>
							<li><i>inherit</i> - default value;</li><li><i>sub-pixel</i> - glyphs can be placed &quot;between pixels&quot;;</li><li><i>snap-pixel</i> - glyphs positions shall fall to pixel grid, this mode is desired for text editing scenarios so caret position will not overlap glyphs.</li></ul>
						</td></tr>
            <tr>
              <td nowrap align="right"><strong>line-height</strong></td>
              <td>
          <div>specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td>normal</td>
              <td>Default. Default height.</td></tr>
            <tr>
              <td>height</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.</td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#line-height">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>text-align</strong></td>
              <td>
          <div>specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td>left</td>
              <td>Default. Text is aligned to the left.</td></tr>
            <tr>
              <td>right</td>
              <td>Text is aligned to the right.</td></tr>
            <tr>
              <td>center</td>
              <td>Text is centered.</td></tr>
            <tr>
              <td>justify</td>
              <td>Text is justified.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#text-align">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>text-decoration</strong></td>
              <td>
          Shorthand, list of text-decoration-line, text-decoration-style and text-decoration-color values.</td></tr>
          <tr><td nowrap align="right"><b>text-decoration-line</b></td>
              <td>
      					Position of text decoration:
                <ul>  
                 <li><i>none</i> - &nbsp;default, text has no decoration;</li>
						<li><i>underline</i> -&nbsp;text is underlined;</li>
						<li><i>overline</i> - text has a line over it;</li>
						<li><i>line-through</i> - text has a line drawn through it.</li>
                </ul></td></tr><tr><td nowrap align="right"><b>text-decoration-style</b></td><td>
					Style of text decoration:<ul><li><i>solid</i> - &nbsp;default, solid line;</li>
						<li><i>double</i> - doubled line;</li>
						<li><i>dotted</i> - dotted line;</li>
						<li><i>dashed</i> - dashed line;</li>
						<li><i>wavy</i> - wavy line</li></ul></td></tr><tr><td nowrap align="right"><b>text-decoration-color</b></td><td>
					Specifies color of text decoration.<p>color&nbsp;or <i>currentcolor</i> name token (default, current text color).</p></td></tr>
            <tr>
              <td nowrap align="right"><strong>text-indent</strong></td>
              <td>
          <div>indentation of the first line of text in the object.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a percent sign (%). This value is a percentage of the width of the parent object.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#text-indent">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>text-overflow</strong></td>
              <td bgcolor="#ffffdd">
          <div>specifies a value that indicates whether ellipses(...) display when text content has overflowed its given layout area.</div>
          <table>
            <tbody><tr>
              <td>ellipsis</td>
              <td>Display ellipses(...) for text overflow.</td></tr>
            <tr>
              <td>clip</td>
              <td>Default. Simply clip the content and do not display ellipses for text overflow.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>text-transform</strong></td>
              <td>
          <div>trivial text transformations. Accepts values:</div>
          <blockquote>
            <div>none | uppercase | lowercase | capitalize</div></blockquote>
          <div>default value: none.</div></td></tr>
            <tr>
              <td nowrap align="right"><strong>vertical-align</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>baseline</td>
              <td>Default. Aligns the contents of an object supporting VALIGN to the base line.</td></tr>
            <tr>
              <td>sub</td>
              <td>Vertically aligns the text to subscript.</td></tr>
            <tr>
              <td>super</td>
              <td>Vertically aligns the text to superscript.</td></tr>
            <tr>
              <td>top</td>
              <td>Vertically aligns the contents of an object supporting <strong>VALIGN</strong> to the top of the object.</td></tr>
            <tr>
              <td>middle</td>
              <td>Vertically aligns the contents of an object supporting <strong>VALIGN</strong> to the middle of the object.</td></tr>
            <tr>
              <td>bottom</td>
              <td>Vertically aligns the contents of an object supporting <strong>VALIGN</strong> to the bottom of the object.</td></tr>
            <tr>
              <td>text-top</td>
              <td>Vertically aligns the text of an object supporting <strong>VALIGN</strong> to the top of the object.</td></tr>
            <tr>
              <td>text-bottom</td>
              <td>Vertically aligns the text of an object supporting <strong>VALIGN</strong> to the bottom of the object.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#vertical-align">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>white-space</strong></td>
              <td>
          <div>specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td valign="top">normal</td>
              <td>Lines may break at allowed break points, as determined by the line-breaking rules in effect</td></tr>
            <tr>
              <td valign="top">none</td>
              <td>Lines may not break; text that does not fit within the block box overflows it.</td></tr>
            <tr>
              <td valign="top">pre</td>
              <td>Line breaks and other whitespace are preserved.</td></tr>
            <tr>
              <td valign="top">prewrap</td>
              <td bgcolor="#ffffdd" valign="top">Line breaks and other whitespace are preserved. Content may wrap to the next line if needed. This is the same mode &lt;textarea&gt; uses when it has wrap=&quot;on&quot; attribute defined. Non-standard.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/CSS1#white-space">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>word-wrap</strong></td>
              <td>
          <div>specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td valign="top">normal</td>
              <td>Lines may break at allowed break points only, e.g. on whitespace.</td></tr>
            <tr>
              <td valign="top">break-word</td>
              <td>Normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.</td></tr></tbody></table>
          <div>See: <a href="http://www.w3.org/TR/css3-text/#text-wrap">Cascading Style Sheets, level 3</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>word-break</strong></td>
              <td>specifies one of the following values:
          <table>
            <tbody><tr>
              <td valign="top">normal</td>
              <td>Use the default line break rule.</td></tr>
            <tr>
              <td valign="top">break-all</td>
              <td>Word breaks may be inserted between any character.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>text-selection-color</strong></td>
              <td bgcolor="#ffffdd">specifies color of selected text (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>text-selection-background-color</strong></td>
              <td bgcolor="#ffffdd">specifies background color of text selection (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>text-selection-caret-color</strong></td>
              <td bgcolor="#ffffdd">specifies color of text caret (in inputs and elements under behavior:htmlarea). Non-standard. Inheritable property.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>text-selection</strong></td>
              <td bgcolor="#ffffdd">
          <div>&lt;text-color&gt; &lt;background-text-color&gt;</div>
          <div>specifies colors of text selection, shortcut of two properties above. Non-standard.</div></td></tr>
            <tr>
              <td rowspan="10" valign="top">
          <div><strong>Color and background properties</strong></div>
          <div></div>
          <div></div>
          <div></div></td>
              <td nowrap align="right"><strong>background</strong></td>
              <td>
          <div><strong>specifies</strong> up to five of the following space-delimited values, in any order.</div>
          <div>See: <a href="http://www.w3.org/TR/CSS1#background">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>background-attachment</strong></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td>scroll</td>
              <td>Default. Background image scrolls with the object as the document is scrolled.</td></tr>
            <tr>
              <td>fixed</td>
              <td>Background image stays fixed within the viewable area of the object.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><a name="background-color-attribute"><strong>background-color</strong></a></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td width="154">transparent</td>
              <td>Default. Color of the next parent object through which the background is visible.</td></tr>
            <tr>
              <td>color</td>
              <td>Any color value, including those specified in the <a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/colors/colors.asp">Color Table</a>.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" valign="middle">color-left-top,<br/>color-right-top,<br/>color-right-bottom,<br/>color-left-bottom</td>
              <td bgcolor="#ffffdd" valign="middle"><strong> <font color="#ff0000">Gradient fill</font></strong>. Four corner colors for gradient background fill. Non standard. HTMLayout specific.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>background-image</strong></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td>none</td>
              <td>Default. Color of the next parent through which the background is visible.</td></tr>
            <tr>
              <td>url(sUrl)</td>
              <td>Location of the background image, where sUrl is an absolute or relative URL.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>background-image-frame</strong></td>
              <td>
          <div>integer, for animated images (aPNG, GIF) that are collections of frames specifies number of frame to show.</div>
          <div>This effectively freezes animation of the image at particular frame.</div>
          <div>This property can be used in transition property to animate image from start to end frame.</div></td></tr>
            <tr>
              <td nowrap align="right"><a name="background-position-attribute"><strong>background-position</strong></a></td>
              <td>
          <div><strong>specifies</strong> one or two of the following values:</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.</td></tr>
            <tr>
              <td>top, center, bottom</td>
              <td>
                <div>Vertical alignment value. Possible values include the following:</div>
                <table>
                  <tbody><tr>
                    <td>top</td>
                    <td>Vertical alignment is at the top.</td></tr>
                  <tr>
                    <td>center</td>
                    <td>Vertical alignment is centered.</td></tr>
                  <tr>
                    <td>bottom</td>
                    <td>Vertical alignment is at the bottom.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td>left, center, right</td>
                    <td>
                <div>Horizontal alignment value. Possible values include the following:</div>
                <table>
                  <tbody><tr>
                    <td>left</td>
                    <td>Horizontal alignment is to the left.</td></tr>
                  <tr>
                    <td>center</td>
                    <td>Horizontal alignment is centered.</td></tr>
                  <tr>
                    <td>right</td>
                    <td>Horizontal alignment is to the right.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td nowrap bgcolor="#ffffdd" valign="middle"> <font face="monospace">left</font>-side-length,<br/><font face="monospace">top</font>-side-length,<br/><font face="monospace">right</font>-side-length,<br/><font face="monospace">bottm</font>-side-length</td>
                    <td bgcolor="#ffffdd" valign="middle">
                <div><strong> <font color="#ff0000">Expandable filling</font></strong> image margins.</div>
                <div>See <strong>Expandable tiling</strong> section in HtmLayout documentation.</div>
                <div>To use extended fill background <strong>background-repeat</strong><em></em>attribute should be equal to '<strong>expand</strong>'. Non standard. HTMLayout specific.</div>
                <div></div></td></tr>
                  <tr>
                    <td>calc(...)</td>
                    <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td nowrap align="right"><a name="background-position-attribute"><strong>background-position</strong></a><strong>-left<br/><a name="background-position-attribute">background-position</a>-right<br/><a name="background-position-attribute">background-position</a>-top<br/><a name="background-position-attribute">background-position</a>-bottom</strong></td>
                    <td>Used in <em>expand</em>, <em>stretch</em> and <em>no-repeat</em> modes. &nbsp;</td></tr>
                  <tr>
                    <td nowrap align="right"><strong>background-repeat</strong></td>
                    <td>
          <div><strong>specifies</strong> one of the following values:</div>
          <table>
            <tbody><tr>
              <td nowrap>repeat</td>
              <td>Default. Image is repeated horizontally and vertically.</td></tr>
            <tr>
              <td nowrap>no-repeat</td>
              <td>Image is not repeated.</td></tr>
            <tr>
              <td nowrap>repeat-x</td>
              <td>Image is repeated horizontally.</td></tr>
            <tr>
              <td nowrap>repeat-y</td>
              <td>Image is repeated vertically.</td></tr>
            <tr>
              <td nowrap valign="middle"><strong><em>expand</em></strong></td>
              <td bgcolor="#ffffdd" valign="middle"><strong> <font color="#ff0000">Expandable filling</font></strong> mode.</td></tr>
            <tr>
              <td nowrap valign="top"><strong><em>stretch </em></strong>[<em>keep-ratio</em>]</td>
              <td bgcolor="#ffffdd" valign="top">Image is stretched to fill background in full. This is the same mode as rendering of image in &lt;IMG&gt; element. If stretch is combined with <em>keep-ratio</em> then images is resized with preservation of aspect ratio. To position such an image use background-position attribute.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>color</strong></td>
              <td>Sets the color of the text of the object.</td></tr>
            <tr>
              <td nowrap align="right"><strong>image-rendering</strong></td>
              <td>The image-rendering property provides a hint about the algorithm it should use to scale images. Supports one of the following values:
          <table>
            <tbody><tr>
              <td nowrap>inherit</td>
              <td>inherit value from parent</td></tr>
            <tr>
              <td nowrap>auto</td>
              <td>bilinear or bicubic interpolation</td></tr>
            <tr>
              <td nowrap>crisp-edges</td>
              <td>linear interpolation</td></tr>
            <tr>
              <td nowrap>pixelated</td>
              <td>nearest-neighbour interpolation</td></tr>
            <tr>
              <td nowrap valign="middle"><strong>default</strong></td>
              <td bgcolor="#ffffdd" valign="middle">alias of <em>crisp-edges</em></td></tr>
            <tr>
              <td nowrap valign="middle"><strong>optimize-quality</strong></td>
              <td bgcolor="#ffffdd" valign="middle">alias of auto</td></tr>
            <tr>
              <td nowrap valign="top"><strong>optimize-speed</strong></td>
              <td bgcolor="#ffffdd" valign="top">alias of pixelated</td></tr></tbody></table>
          <p>Default value is <em>inherit</em> - once it defined on a container it is used by rendering background and foreground images of all children (if they do not override it).</p></td></tr>
            <tr>
              <td rowspan="9" bgcolor="#ffffdd" valign="top">
          <div><strong>foreground image &nbsp;properties.</strong></div>
          <p> <font size="1">Foreground image is HTMLayout specific feature.</font></p>
          <p> <font size="1">Foreground image has the same set of attributes as background.</font></p>
          <p> <font size="1">Sequence of drawing of block in HTMLayout:</font></p>
          <p> <font size="1">1. background<br/>2. borders<br/>3. content<br/>4. outline<br/>5. foreground</font></p>
          <div></div>
          <div></div></td>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground</strong></td>
              <td bgcolor="#ffffdd">
          <div>specifies up to four of the following space-delimited values, in any order.</div>
          <div>&lt;foreground-image url&gt; || &lt;foreground-repeat&gt; || &lt;foreground-attachment&gt; || &lt;foreground-position&gt; || &lt;foreground-color&gt; || &lt;foreground-gradient&gt;</div></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-color</strong></td>
              <td bgcolor="#ffffdd">color of the foreground layer. Essentially this is the same as background-color but it is drawn on top of everything. So the only reasonable color values are the ones defined by rgba() - semi-transparent colors.
          <p><strong> <font color="#ff0000">ATTN</font></strong>: solid colors on foreground will hide everything underneath them.</p></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-attachment</strong></td>
              <td bgcolor="#ffffdd">
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>scroll</td>
              <td>Default. Foreground image scrolls with the object as the document is scrolled.</td></tr>
            <tr>
              <td>fixed</td>
              <td>Foreground image stays fixed within the viewable area of the object.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-image</strong></td>
              <td bgcolor="#ffffdd">
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>none</td>
              <td>Default. Color of the next parent through which the background is visible.</td></tr>
            <tr>
              <td>url(sUrl)</td>
              <td>Location of the background image, where sUrl is an absolute or relative URL.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-image-frame</strong></td>
              <td bgcolor="#ffffdd">integer, for animated images (aPNG, GIF) that are collections of frames this property specifies number of frame to show.
          <div>This effectively freezes animation of the image at particular frame.</div>
          <div>This property can be used in transition property to animate image from start to end frame.</div></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><a name="foreground-position-attribute"><strong>foreground-position</strong></a></td>
              <td bgcolor="#ffffdd">
          <div><strong>specifies</strong> following values.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.</td></tr>
            <tr>
              <td>top, center, bottom</td>
              <td>
                <div>Vertical alignment value. Possible values include the following:</div>
                <table>
                  <tbody><tr>
                    <td>top</td>
                    <td>Vertical alignment is at the top.</td></tr>
                  <tr>
                    <td>center</td>
                    <td>Vertical alignment is centered.</td></tr>
                  <tr>
                    <td>bottom</td>
                    <td>Vertical alignment is at the bottom.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td>left, center, right</td>
                    <td>
                <div>Horizontal alignment value. Possible values include the following:</div>
                <table>
                  <tbody><tr>
                    <td>left</td>
                    <td>Horizontal alignment is to the left.</td></tr>
                  <tr>
                    <td>center</td>
                    <td>Horizontal alignment is centered.</td></tr>
                  <tr>
                    <td>right</td>
                    <td>Horizontal alignment is to the right.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td nowrap bgcolor="#ffffdd" valign="middle"> <font face="monospace">left</font>-side-length,<br/><font face="monospace">top</font>-side-length,<br/><font face="monospace">right</font>-side-length,<br/><font face="monospace">bottm</font>-side-length</td>
                    <td bgcolor="#ffffdd" valign="middle">
                <div><strong> <font color="#ff0000">Expandable filling</font></strong> image margins.</div>
                <div>See <strong>Expandable tiling</strong> section in HtmLayout documentation.</div>
                <div>To use extended fill background <strong>background-repeat</strong><em></em>attribute should be equal to '<strong>expand</strong>'. Non standard. HTMLayout specific.</div>
                <div></div></td></tr>
                  <tr>
                    <td>calc(...)</td>
                    <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table>
          <div> <font face="monospace">.style1 { background-position:top center }</font></div>
          <div> <font face="monospace">.style2 { background-position:0 0 }</font></div></td></tr>
                  <tr>
                    <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-position-left<br/>foreground-position-right<br/>foreground-position-top<br/>foreground-position-bottom</strong></td>
                    <td bgcolor="#ffffdd">Used in <em>expand</em>, <em>stretch</em> and <em>no-repeat</em> modes. See <a href="css-images-plus.htm">css-images-plus</a> for more details.</td></tr>
                  <tr>
                    <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-repeat</strong></td>
                    <td bgcolor="#ffffdd">
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td nowrap valign="middle"><em>repeat</em></td>
              <td>Default. Image is repeated horizontally and vertically.</td></tr>
            <tr>
              <td nowrap valign="middle"><em>no-repeat</em></td>
              <td>Image is not repeated.</td></tr>
            <tr>
              <td nowrap valign="middle"><em>repeat-x</em></td>
              <td>Image is repeated horizontally.</td></tr>
            <tr>
              <td nowrap valign="middle"><em>repeat-y</em></td>
              <td>Image is repeated vertically.</td></tr>
            <tr>
              <td nowrap valign="middle"><strong><em>expand</em></strong></td>
              <td bgcolor="#ffffdd" valign="middle"><strong> <font color="#ff0000">Expandable filling</font></strong> mode.</td></tr>
            <tr>
              <td nowrap valign="middle"><strong><em>stretch</em></strong> [<em>keep-ratio</em>]</td>
              <td bgcolor="#ffffdd" valign="middle">Image is stretched to fill background in full. This is the same mode as rendering of image in &lt;IMG&gt; element. If stretch is combined with <em>keep-ratio</em> then images is resized with preservation of aspect ratio. To position such an image use foreground-position attribute.</td></tr></tbody></table>
          <div>See <a href="css-images-plus.htm">css-images-plus</a> for more details.</div></td></tr>
            <tr>
              <td nowrap bgcolor="#ffffdd" align="right"><strong>foreground-image-cursor</strong></td>
              <td bgcolor="#ffffdd">
          <div>Used when <em>foreground-repeat</em> has <em>no-repeat</em> value to define when mouse hovers foreground-image area.</div>
          <div>Values: <em>auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress | no-drop </em>&nbsp;or url of .cur or .ani file.</div></td></tr>
            <tr>
              <td rowspan="34" valign="top"><strong>Layout properties</strong></td>
              <td nowrap align="right"><strong>border</strong></td>
              <td>
          <div><strong>specifies</strong> one or more of the following space-delimited values: width, style, color.</div>
          <div>See: <a href="http://www.w3.org/TR/CSS1#border">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>border-bottom</strong></td>
              <td>
          <div><strong>specifies</strong> one or more of the following space-delimited values: width, style, color.</div>
          <div>See: <a href="http://www.w3.org/TR/CSS1#border-bottom">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>border-bottom-color</strong></td>
              <td>specifies one of the color names or RGB values in the <a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/colors/colors.asp">Color Table</a>.</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-bottom-style</strong></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td>none</td>
              <td>Default. Border is not drawn, regardless of any border width.</td></tr>
            <tr>
              <td>dotted</td>
              <td>Border is a dotted line.</td></tr>
            <tr>
              <td>dashed</td>
              <td>Border is a dashed line.</td></tr>
            <tr>
              <td>solid</td>
              <td>Border is a solid line.</td></tr>
            <tr>
              <td>double</td>
              <td>Border is a double line drawn on top of the background of the object. The sum of the two single lines and the space between equals the <strong>borderWidth</strong> value. The border width must be at least 3 pixels wide to draw a double border.</td></tr>
            <tr>
              <td>groove</td>
              <td>3-D groove is drawn in colors based on the value.</td></tr>
            <tr>
              <td>ridge</td>
              <td>3-D ridge is drawn in colors based on the value.</td></tr>
            <tr>
              <td>inset</td>
              <td>3-D inset is drawn in colors based on the value.</td></tr>
            <tr>
              <td>outset</td>
              <td>3-D outset is drawn in colors based on the value.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>border-bottom-width</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td width="84">medium</td>
              <td>Default. &nbsp;</td></tr>
            <tr>
              <td>thin</td>
              <td>Less than the default width.</td></tr>
            <tr>
              <td>thick</td>
              <td>Greater than the default width.</td></tr>
            <tr>
              <td>width</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle"><strong>%% units</strong></td>
              <td bgcolor="#ffe4ca" valign="middle"><a href="fspu.whtm"><strong>Percents from free space</strong></a><strong>.</strong></td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>border-collapse*</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-color</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-left</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-left-color</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-left-style</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-left-width</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-right</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-right-color</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-right-style</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-right-width</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-style</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-top</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-top-color</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-top-style</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-top-width</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>border-width</strong></td>
              <td>as per CSS</td></tr><tr><td nowrap align="right"><b>border-radius</b></td><td>
						
						<p>as per CSS:</p><ul><li>one, two, three, or four &lt;length&gt; or &lt;percentage&gt; values. This is used to set a single radius for the corners.</li>
							<li>followed optionally by &quot;/&quot; and one, two, three, or four &lt;length&gt; or &lt;percentage&gt; values. This is used to set an additional radius, so you can have elliptical corners.</li>
							</ul>
						<p>Current limitation: with non-zero border radius colors of all borders shall be the same.</p></td></tr>
            <tr>
              <td nowrap align="right"><strong>clear</strong></td>
              <td>as per CSS</td></tr>
            <tr>
              <td nowrap align="right"><strong>float</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>none</td>
              <td>Default. Object displays where it appears in the text.</td></tr>
            <tr>
              <td>left</td>
              <td>Text flows to the right of the object.</td></tr>
            <tr>
              <td>right</td>
              <td>Text flows to the left of the object.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>margin</strong></td>
              <td>
          <div>specifies up to four of the following space-delimited values.</div>
          <div>See: <a href="http://www.w3.org/TR/CSS1#margin">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>margin-bottom</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>auto</td>
              <td>Default. Bottom margin is set equal to the top margin.</td></tr>
            <tr>
              <td>height</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle"><strong>%% units</strong></td>
              <td bgcolor="#ffe4ca" valign="middle"><strong>Percents from free space.</strong></td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>margin-left</strong></td>
              <td><strong>--&quot;--</strong></td></tr>
            <tr>
              <td nowrap align="right"><strong>margin-right</strong></td>
              <td>--&quot;--</td></tr>
            <tr>
              <td nowrap align="right"><strong>margin-top</strong></td>
              <td>--&quot;--</td></tr>
            <tr>
              <td nowrap align="right"><strong>padding</strong></td>
              <td>
          <div>Sets or retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border.</div>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a %. The value is a percentage of the width of the parent object.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle"><strong>%% units</strong></td>
              <td bgcolor="#ffe4ca" valign="middle"><strong>Percents from free space.</strong></td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>padding-bottom</strong></td>
              <td>--&quot;--</td></tr>
            <tr>
              <td nowrap align="right"><strong>padding-left</strong></td>
              <td>--&quot;--</td></tr>
            <tr>
              <td nowrap align="right"><strong>padding-right</strong></td>
              <td>--&quot;--</td></tr>
            <tr>
              <td nowrap align="right"><strong>padding-top</strong></td>
              <td>--&quot;--</td></tr>
            <tr>
              <td rowspan="7" valign="top">
          <div><strong>Classification properties</strong></div>
          <div></div></td>
              <td nowrap align="right"><strong>list-style</strong></td>
              <td>
          <div><strong>specifies</strong> up to three of the following values, in any order: type, position, image.</div>
          <div>See: <a href="http://www.w3.org/TR/CSS1#list-style">Cascading Style Sheets, level 1</a></div></td></tr>
            <tr>
              <td nowrap align="right"><strong>list-style-image</strong></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td>none</td>
              <td>Default. No image is specified.</td></tr>
            <tr>
              <td>url(sURL)</td>
              <td>Location of the image, where sURL is an absolute or relative URL.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>list-style-position</strong></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td>outside</td>
              <td>Default. Marker is placed outside the text, and any wrapping text is not aligned under the marker.</td></tr>
            <tr>
              <td>inside</td>
              <td>Marker is placed inside the text, and any wrapping text is aligned under the marker.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>list-style-type</strong></td>
              <td>
          <div><strong>specifies</strong> one of the following values.</div>
          <table>
            <tbody><tr>
              <td nowrap valign="middle">disc</td>
              <td>Default. Solid circles.</td></tr>
            <tr>
              <td nowrap valign="middle">circle</td>
              <td>Outlined circles.</td></tr>
            <tr>
              <td nowrap valign="middle">square</td>
              <td>Solid squares.</td></tr>
            <tr>
              <td nowrap valign="middle">decimal</td>
              <td>1, 2, 3, 4, and so on.</td></tr>
            <tr>
              <td nowrap valign="middle">lower-roman</td>
              <td>i, ii, iii, iv, and so on.</td></tr>
            <tr>
              <td nowrap valign="middle">upper-roman</td>
              <td>I, II, III, IV, and so on.</td></tr>
            <tr>
              <td nowrap valign="middle">lower-alpha</td>
              <td>a, b, c, d, and so on.</td></tr>
            <tr>
              <td nowrap valign="middle">upper-alpha</td>
              <td>A, B, C, D, and so on.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" valign="middle">tree-line</td>
              <td bgcolor="#ffe4ca" valign="middle">Draws tree lines</td></tr>
            <tr>
              <td nowrap valign="middle">none</td>
              <td>No marker is shown.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>list-marker-color</strong></td>
              <td bgcolor="#ffe4ca">Sets the color of the list marker (bullet, number or tree line)</td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>list-marker-size</strong></td>
              <td bgcolor="#ffe4ca">Sets size of font used for drawing bullets and numbers. For list-style-type:tree-line this attribute defines width of tree line.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>list-marker-style</strong></td>
              <td bgcolor="#ffe4ca">
          <div>For list-style-type:tree-line this attribute defines style of the tree line:</div>
          <table>
            <tbody><tr>
              <td>none</td>
              <td>Default. Line is not drawn, regardless of any border width.</td></tr>
            <tr>
              <td>dotted</td>
              <td>Dotted line.</td></tr>
            <tr>
              <td>dashed</td>
              <td>Dashed line.</td></tr>
            <tr>
              <td>solid</td>
              <td>Border is a solid line.</td></tr></tbody></table></td></tr>
            <tr>
              <td rowspan="19" valign="top">
          <div><strong>Positioning and dimensional properties</strong></div>
          <div></div></td>
              <td nowrap align="right"><strong>position</strong></td>
              <td>static | relative | absolute | fixed<br/>As per <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme">CSS2 recommendation</a>.</td></tr>
            <tr>
              <td nowrap align="right"><strong>left</strong></td>
              <td rowspan="4">
          <div>As per <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme">CSS2 recommendation</a>.</div>
          <div><strong>Value</strong> that specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>auto</td>
              <td>Default. &nbsp;</td></tr>
            <tr>
              <td>height</td>
              <td>Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly. Negative values are not allowed.</td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>right</strong></td></tr>
            <tr>
              <td nowrap align="right"><strong>top</strong></td></tr>
            <tr>
              <td nowrap align="right"><strong>bottom</strong></td></tr>
            <tr>
              <td nowrap align="right"><strong>height</strong></td>
              <td>
          <div><strong>Value</strong> that specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td valign="top">auto</td>
              <td>Default. &nbsp;</td></tr>
            <tr>
              <td valign="top">height</td>
              <td>Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td valign="top">percentage</td>
              <td>Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly. Negative values are not allowed.</td></tr>
            <tr>
              <td valign="top"><strong>%% units</strong></td>
              <td bgcolor="#ffe4ca" valign="middle">Percentage of free space.</td></tr>
            <tr>
              <td valign="top"><strong>width(NN%)</strong></td>
              <td bgcolor="#ffe4ca" valign="middle">Will set height as a percentage of width of the element itself. This allow element to maintain its aspect ratio.</td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td nowrap align="right"><strong>z-index</strong></td>
              <td>As per <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#z-index">CSS2</a>.</td></tr>
            <tr>
              <td nowrap align="right"><strong>overflow</strong></td>
              <td valign="middle">
          <div>overflow-type [scroll-manner]. First overflow-type value specifies one of the following values. Shortcut attribute of overflow-x and overflow-y</div>
          <table>
            <tbody><tr>
              <td>visible</td>
              <td>Default. Content is not clipped and scroll bars are not added.</td></tr>
            <tr>
              <td>scroll</td>
              <td>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.</td></tr>
            <tr>
              <td>hidden</td>
              <td>Content that exceeds the dimensions of the object is not shown. Content is not scrollable by UI.</td></tr>
            <tr>
              <td>auto</td>
              <td>Content is clipped and scrolling is added only when necessary.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">hidden-scroll</td>
              <td bgcolor="#ffe4ca" valign="middle">The scrollbar is not shown but content of the element is scrollable.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">scroll-indicator</td>
              <td bgcolor="#ffe4ca" valign="middle">Element shows scroll position indicator when mouse is hovering this element</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">none</td>
              <td bgcolor="#ffe4ca" valign="middle">That's an equivalent of defining <code>{ overflow:visible; min-width:min-content; min-height:min-content; }</code></td></tr></tbody></table>
          <div>Second (optional) parameter is a definition of the scroll-manner() function, see defintion of the scroll-manner below.</div></td></tr>
            <tr>
              <td align="right"><strong>overflow-x<br/>overflow-y</strong></td>
              <td>
          <div>overflow-type [scroll-manner]. First overflow-type value specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td>visible</td>
              <td>Default. Content is not clipped and scroll bars are not added.</td></tr>
            <tr>
              <td>scroll</td>
              <td>Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.</td></tr>
            <tr>
              <td>hidden</td>
              <td>Content that exceeds the dimensions of the object is not shown.</td></tr>
            <tr>
              <td>auto</td>
              <td>Content is clipped and scrolling is added only when necessary.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">hidden-scroll</td>
              <td bgcolor="#ffe4ca" valign="middle">The scrollbar is not shown but content the element is scrollable.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">scroll-indicator</td>
              <td bgcolor="#ffe4ca" valign="middle">Element shows scroll position indicator when mouse is hovering this element</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">none</td>
              <td bgcolor="#ffe4ca" valign="middle">That's an equivalent of defining <code>{ overflow:visible; min-width:min-content; }</code> or<br/><code>{ overflow:visible; min-height:min-content; }</code>.</td></tr></tbody></table>
          <div>Second (optional) parameter is a definition of the scroll-manner() function, see defintion of the scroll-manner below.</div></td></tr>
            <tr>
              <td bgcolor="#ffe4ca" align="right">
          <div><strong>scroll-manner</strong></div>
          <div><strong>scroll-manner-x</strong></div>
          <div><strong>scroll-manner-y</strong></div></td>
              <td bgcolor="#ffe4ca">
          <div>These attributes accept either <em>inherit</em> value or &quot;function&quot; named <em>scroll-manner()</em> with the following named parameters:</div>
          <table>
            <tbody><tr>
              <td nowrap valign="top"><em>inherit</em></td>
              <td>default value</td></tr>
            <tr>
              <td nowrap valign="top"><em>animation : </em>true | false</td>
              <td>enables/disables all ****-animation attributes all together.</td></tr>
            <tr>
              <td nowrap valign="top"><em>page-animation : </em>true | false</td>
              <td>if true then PAGE UP/DOWN keys are causing smooth scroll animation.</td></tr>
            <tr>
              <td nowrap valign="top"><em>step-animation</em> : true | false</td>
              <td>if true then UP/DOWN keys are causing smooth scroll animation.</td></tr>
            <tr>
              <td nowrap valign="top"><em>home-animation</em> : true | false</td>
              <td>if true then HOME/END keys are causing smooth scroll animation.</td></tr>
            <tr>
              <td nowrap valign="top"><em>wheel-animation</em> : true | false</td>
              <td>if true then MOUSE WHEEL events are causing smooth scroll animation.</td></tr>
            <tr>
              <td nowrap valign="top"><em>step</em> : length | percent | auto</td>
              <td>
                <div>single scroll step (UP/DOWN keys) is computed according to dimension of first visible item. In case of length value scroll step will be equal to that value converted to pixels. Percentage value is computed against corresponding dimension of the element.</div>
                <div>Default value is 6.25% (1/16) of width or height. <em>auto</em> means &quot;integral step&quot; - scroll by full row.</div></td></tr>
            <tr>
              <td nowrap valign="top"><em>page</em> : length | percent | auto</td>
              <td>
                <div><em>auto</em> means &quot;integral step&quot; - single scroll step (UP/DOWN keys) is computed according to dimension of last visible item. In case of length value scroll step will be equal to that value converted to pixels. Percentage value is computed against corresponding dimension of the element.</div>
                <div>Default value is 100% - whole width or height of the scrollable area of the element.</div></td></tr>
            <tr>
              <td nowrap valign="top"><em>wheel-step</em> : length | percent | auto</td>
              <td>
                <div>delta added to current scroll position on   each MOUSE_WHEEL event&nbsp;received.</div></td></tr></tbody></table>
          <div>Example of scroll manner style definition:</div>
          <div> <font face="Courier New">div#scrollable {</font></div>
          <div> <font face="Courier New">&nbsp;overflow:auto;</font></div>
          <div><strong> <font face="Courier New">&nbsp;scroll-manner</font></strong><font face="Courier New">: scroll-manner( page-animation:true,</font></div>
          <div> <font face="Courier New">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step-animation:false, &nbsp;&nbsp;</font></div>
          <div> <font face="Courier New">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step:auto );</font></div>
          <div> <font face="Courier New">}</font></div></td></tr>
            <tr>
              <td align="right"><strong>width</strong></td>
              <td>
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>auto</td>
              <td>Default. Default width of the object.</td></tr>
            <tr>
              <td>width</td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle"><strong>%% units</strong></td>
              <td bgcolor="#ffe4ca" valign="middle"><strong>Percentage of free space in the container.</strong></td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>min-height</strong></td>
              <td>
          <div>specifies the minimum height for an element.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>Integer followed by a % that specifies a percentage of the containing block height to use as the minimum height of the element. If the height of the containing block is not explicitly set, then the element has no minimum height and the property is interpreted as 0%. For more information on containing blocks and how its height is computed, see the <a href="http://www.w3.org/tr/rec-css2" target="_top">Cascading Style Sheets, Level 2 (CSS2)</a> specification.</td></tr>
            <tr>
              <td valign="top"><strong>width(NN%)</strong></td>
              <td bgcolor="#ffe4ca" valign="middle">Will set min-height as a percentage of width of the element itself. This allow element to maintain its aspect ratio.</td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>min-width</strong></td>
              <td>
          <div>specifies the minimum width for an element.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>
                <div>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.</div>
                <div>For more information on containing blocks and how its width is computed, see the <a href="http://www.w3.org/tr/rec-css2" target="_top">Cascading Style Sheets, Level 2 (CSS2)</a> specification.</div></td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">auto</td>
              <td bgcolor="#ffe4ca" valign="middle">
                <div>min-width is equal to minimum intrinsic width of the element.</div>
                <div>In HTMLayout all elements are getting this value by default to mimic Internet Explorer behavior. Non standard.</div></td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>max-height</strong></td>
              <td>
          <div>specifies the maximum height for an element.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>
                <div>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.</div>
                <div>For more information on containing blocks and how its width is computed, see the <a href="http://www.w3.org/tr/rec-css2" target="_top">Cascading Style Sheets, Level 2 (CSS2)</a> specification.</div></td></tr>
            <tr>
              <td valign="top"><strong>width(NN%)</strong></td>
              <td bgcolor="#ffe4ca" valign="middle">Will set height as a percentage of width of the element itself. This allow element to maintain its aspect ratio.</td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>max-width</strong></td>
              <td>
          <div>specifies the maximum width for an element.</div>
          <table>
            <tbody><tr>
              <td>length</td>
              <td>Floating-point number followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>percentage</td>
              <td>
                <div>Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.</div>
                <div>For more information on containing blocks and how its width is computed, see the <a href="http://www.w3.org/tr/rec-css2" target="_top">Cascading Style Sheets, Level 2 (CSS2)</a> specification.</div></td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">auto</td>
              <td bgcolor="#ffe4ca" valign="middle">
                <div>max-width is equal to maximum intrinsic width of the element.</div>
                <div>In HTMLayout &lt;TABLE&gt; element has this value by default. This allow to model table dimensions when no width attribute set.</div>
                <div>Non standard.</div>
                <div>Example, table looks like as max-width:auto set:</div>
                <table border="1" cellspacing="1">
                  <tbody><tr>
                    <td>This table has no width set.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td>calc(...)</td>
                    <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
                  <tr>
                    <td bgcolor="#ffe4ca" align="right"><a name="flow-attribute"><strong>flow</strong></a></td>
                    <td bgcolor="#ffe4ca" valign="middle">
          <div>Flow direction of child elements in block containers (e.g. DIVs). This attribute defines type of <em>layout manager</em> (LM) used by the block container.</div>
          <table>
            <tbody><tr>
              <td><strong>vertical</strong></td>
              <td>Default value. All child elements in block element placed from top to bottom. Standard behavior of DIV in HTML</td></tr>
            <tr>
              <td><strong>horizontal</strong></td>
              <td>All child blocks placed from left to right in a single row.</td></tr>
            <tr>
              <td><strong>horizontal-flow</strong></td>
              <td>Multiple rows. All child blocks placed from left to right. Overflowed blocks wrapped on the next row. height:100%% for blocks in this layout means height of the row.</td></tr>
            <tr>
              <td><strong>vertical-flow</strong></td>
              <td>Multiple columns. All child blocks placed from top to bottom. Overflowed blocks wrapped on the next column. width:100%% for blocks in this layout correspond to the width of the column.</td></tr>
            <tr>
              <td><strong>&quot;...template...&quot;</strong></td>
              <td></td></tr></tbody></table>
          <div>See <a href="http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm">Flow and Flex Units</a> document for more information.</div></td></tr>
            <tr>
              <td bgcolor="#ffe4ca" align="right"><a name="hit-margin"><strong>hit-margin</strong></a></td>
              <td bgcolor="#ffe4ca" valign="middle">specifies up to four of the following space-delimited values. Notation is the same as for the <em>margin</em> attribute. hit-margin defines &quot;hover area&quot; of the element. Positive values increase hover area and negative values decrease it. Hit margins are calculated from border box of the element.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" align="right"><strong>size</strong></td>
              <td bgcolor="#ffe4ca" valign="middle">length [ length]
          <div>This is a shortcut property for width and height properties. If only one length value is provided then both width and height will get that length value. If there are two values then first one will go to width and second to height properties.</div></td></tr>
            <tr>
              <td bgcolor="#ffe4ca" align="right"><strong>mapping</strong></td>
              <td bgcolor="#ffe4ca" valign="middle"><em>inherit</em> | <em>none</em> | <em>left-to-right</em> | <em>top-to-right</em> |<br/><em>inherit( &lt;part-list&gt; )</em> | <em>none( &lt;part-list&gt; )</em> | <em>left-to-right( &lt;part-list&gt; )</em> | <em>top-to-right( &lt;part-list&gt; )</em>
          <p>Where <font face="monospace" size="2">&lt;part-list&gt;</font> is a comma separated list that contains one or many of following literals: <font face="monospace" size="2">border</font>, <font face="monospace" size="2">padding</font>, <font face="monospace" size="2">margin</font>, <font face="monospace" size="2">background</font>, <font face="monospace" size="2">foreground</font>, <font face="monospace" size="2">layout</font> .</p>
          <p>The property defines mapping of directional related properties. For example this declaration:</p>
          <pre>div { mapping: left-to-right(border,margin); }
</pre>
          <p>will cause left and right borders (colors, widths and styles) and margins to be swapped (mirrored in this case) so for example border defined as border-left will be used as border-right for rendering purposes.</p>Note that is an inheritable by default property. So if to define <font face="monospace" size="2">body { mapping: left-to-right;}</font> all directional properties of the element and its descendants will be mirrored horizontally. Meaning of part names in <font face="monospace" size="2">&lt;part-list&gt;</font>:
          <ul>
            <li> <font face="monospace" size="2">border</font> - all border related properties : color, style and width.</li>
            <li> <font face="monospace" size="2">padding</font> - all padding properties, padding-left, padding-right, etc.</li>
            <li> <font face="monospace" size="2">margin</font> - all margin properties, margin-left, margin-right, hit-margin, etc.</li>
            <li> <font face="monospace" size="2">background</font> - directional background properties: background-position, background image and gradients.</li>
            <li> <font face="monospace" size="2">foreground</font> - directional foreground properties: foreground-position and foreground image.</li>
            <li> <font face="monospace" size="2">layout</font> - layout is mirrored. For example <font face="monospace" size="2">flow:horizontal; mapping: left-to-right(layout);</font> &nbsp;will cause blocks to be replaced from right to left.</li></ul></td></tr>
            <tr>
              <td rowspan="5" valign="top">
          <div><strong>Outline</strong></div>
          <p> <font size="1">Outlines similar to borders but differ from them in the following ways:</font></p>
          <div> <font size="1">1. Outlines do not take up space.</font></div>
          <div> <font size="1">2. All sides of outline rectangle has equal property values.</font></div></td>
              <td align="right"><strong>outline</strong></td>
              <td nowrap valign="top">
          <div>shortcut attribute, accepts up to four values:</div>
          <div>[ &lt;'outline-color'&gt; || &lt;'outline-style'&gt; || [&lt;'outline-width'&gt; [ &lt;'outline-offset'&gt; ] ]</div></td></tr>
            <tr>
              <td align="right"><strong>outline-width</strong></td>
              <td nowrap valign="top">
          <div>Width of outline:</div>
          <table>
            <tbody><tr>
              <td width="84" align="right"><em>medium</em></td>
              <td>Default. &nbsp;</td></tr>
            <tr>
              <td align="right"><em>thin</em></td>
              <td>Less than the default width.</td></tr>
            <tr>
              <td align="right"><em>thick</em></td>
              <td>Greater than the default width.</td></tr>
            <tr>
              <td align="right"><em>width</em></td>
              <td>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see <a href="http://www.w3.org/TR/CSS1#length-units">CSS Length Units Reference</a>.</td></tr>
            <tr>
              <td>calc(...)</td>
              <td><a href="csss!-calc-function.htm">the calc function</a>.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>outline-style</strong></td>
              <td nowrap valign="top">
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td align="right"><em>none</em></td>
              <td>Default. Border is not drawn, regardless of any border width.</td></tr>
            <tr>
              <td align="right"><em>dotted</em></td>
              <td>outline is a dotted line.</td></tr>
            <tr>
              <td align="right"><em>dashed</em></td>
              <td>outline is a dashed line.</td></tr>
            <tr>
              <td align="right"><em>solid</em></td>
              <td>outline is a solid line.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>outline-color</strong></td>
              <td nowrap valign="top">color of the outline.</td></tr>
            <tr>
              <td align="right"><strong>outline-offset</strong></td>
              <td valign="top">Length units, offset of outline. Positive values - offset outwards, negative values - offset inwards. CSS3 attribute.</td></tr>
            <tr>
              <td rowspan="6" valign="top">
          <div><strong>Pseudo-classes and other properties</strong></div>
          <div></div></td>
              <td nowrap align="right"><strong>cursor</strong></td>
              <td><em>auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help |  drag-copy | drag-move&nbsp;</em> values or url of .cur or .ani file.</td></tr>
            <tr>
              <td nowrap align="right"><strong>display</strong></td>
              <td>As per CSS1.
						<p>Supported values:</p>
						<ul><li>block</li><li>inline</li><li>inline-block</li><li>list-item</li><li>contents</li><li>table</li><li>inline-table</li><li>table-row</li><li>table-cell</li><li>table-body</li></ul></td></tr>
            <tr>
              <td nowrap align="right"><strong>visibility</strong></td>
              <td>
          <table>
            <tbody><tr>
              <td align="right"><em>visible</em></td>
              <td>Default. element is visible and takes space;</td></tr>
            <tr>
              <td align="right"><em>hidden</em></td>
              <td>element takes space but is invisible;</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" align="right"><em>none</em></td>
              <td bgcolor="#ffe4ca">Sciter specific, element is excluded from rendering tree in exactly the same way as display:none.</td></tr>
            <tr>
              <td align="right"><em>collapse</em></td>
              <td>element takes no space and is invisible;</td></tr></tbody></table>
          <p> <font color="#990033">ATTN: meaning of <em>collapse</em> is extended to support of not only rows in tables as per standard CSS but it is applicable for all other elements. <em>visibility: collapse</em> is an equivalent of <em>display:none</em> but collapsed elements participate in computation of intrinsic widths of containers thus dynamic change of visibility:visible to visibility:collapse will not change computed width of container element.</font></p>
          <p> <font color="#990033">Changing of visibility:visible/collapse is recommended for dynamic hide/show effects. It is easy to hide element by setting display:none to reenable its appearance is difficult - there many display values to choose from: block, inline-block, list-item, etc.</font></p></td></tr>
            <tr>
              <td bgcolor="#ffffdd" align="right"><strong>direction</strong></td>
              <td bgcolor="#ffffdd">
          <div>specifies one of the following values.</div>
          <table>
            <tbody><tr>
              <td>ltr</td>
              <td>Default. Content flows left to right.</td></tr>
            <tr>
              <td>rtl</td>
              <td>Content flows right to left.</td></tr>
            <tr>
              <td>inherit</td>
              <td>Content flow is inherited.</td></tr></tbody></table></td></tr><tr><td bgcolor="#ffffdd" align="right"><b>animation</b></td><td bgcolor="#ffffdd">The animation shorthand CSS property applies an animation between styles. It is a shorthand for <b>animation-name</b>, <b>animation-duration</b>, <b>animation-timing-function</b>, <b>animation-delay</b>, <b>animation-iteration-count</b>, <b>animation-direction</b>, <b>animation-fill-mode</b>, and <b>animation-play-state</b>. Animation is implemented per <a href="https://www.w3.org/TR/css-animations-1/">CSS specification</a>.&nbsp;</td></tr>
            <tr>
              <td bgcolor="#ffffdd" align="right"><strong>transition</strong></td>
              <td bgcolor="#ffffdd">
          <div>Defines transition effect - comma separated list of animated property definitions in the form:</div>
          <pre>propname easefunc duration [delay]</pre> 
          <div>Where <i>propname</i> is a name of CSS property to animate and <i>easefunc</i> is a name of ease curve function, one of:</div> 
          <pre>none 
linear 
quad-in    quad-out    quad-in-out
cubic-in   cubic-out   cubic-in-out
quart-in   quart-out   quart-in-out
quint-in   quint-out   quint-in-out
sine-in    sine-out    sine-in-out
expo-in    expo-out    expo-in-out
circ-in    circ-out    circ-in-out
elastic-in elastic-out elastic-in-out
back-in    back-out    back-in-out
x-back-in  x-back-out  x-back-in-out
xx-back-in xx-back-out xx-back-in-out
bounce-in  bounce-out  bounce-in-out</pre>
          <div>Example:</div>
          <pre>.mybutton:hover { color:red; border-color: white;
                  transition: color linear 200ms, border-color linear 100ms; }</pre>
          <div>Note that <i>transition</i> is implemented per <a href="https://www.w3.org/TR/css-transitions-1/">CSS specification</a>&nbsp;modulo ease function names.</div>
          </td></tr>
            <tr>
              <td rowspan="2" valign="top">
          <div><strong>Paged media (printing)</strong></div></td>
              <td align="right"><strong>page-break-before</strong></td>
              <td nowrap valign="top">
          <div>Value that specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td>auto</td>
              <td>- default.</td></tr>
            <tr>
              <td>always</td>
              <td>- always insert page break before this element.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">percentage</td>
              <td bgcolor="#ffe4ca" valign="middle">- integer followed by a percent sign (%). <strong>Conditional page break</strong>. The value is a percentage of the height of the page. Engine will insert page break only if position of the element on the page is greater than this value.</td></tr></tbody></table></td></tr>
            <tr>
              <td align="right"><strong>page-break-after</strong></td>
              <td nowrap valign="top">
          <div>Value that specifies one of the following values:</div>
          <table>
            <tbody><tr>
              <td>auto</td>
              <td>- default.</td></tr>
            <tr>
              <td>always</td>
              <td>- always insert page break after this element.</td></tr>
            <tr>
              <td bgcolor="#ffe4ca" valign="middle">percentage</td>
              <td bgcolor="#ffe4ca" valign="middle">- integer followed by a percent sign (%). <strong>Conditional page break</strong>. The value is a percentage of the height of the page. Engine will insert page break after this element only if bottom position of the element on the page is greater than this value.</td></tr></tbody></table></td></tr>
            <tr>
              <td rowspan="3" bgcolor="#ffe4ca" valign="top"><strong>Behavioral &nbsp;attributes</strong></td>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>behavior</strong></td>
              <td bgcolor="#ffe4ca">
          <div>list of whitespace delimeted <a href="http://www.w3.org/TR/REC-xml/#NT-Nmtoken">nmtoken</a>s - names of native behaviors applied to this element.</div>
          <p>Behavior is the name of builtin or application defined class of behavior.</p></td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>prototype</strong></td>
              <td bgcolor="#ffe4ca">
          <div><em>name</em> [ <em>url(...)</em> ]</div>
          <p> <font color="#ff0000">Only in Sciter!</font></p>
          <div>Name of the class in the script - prototype scripting object (class) of this element. Such a class can define methods, properties and event handling methods of the whole class of elements this style applies to. To use compound names like <em>namespace.class</em> enclose them into quotes: <font face="Courier New">prototype: &quot;Module.CoolWidget&quot;;</font></div>
          <p>If <em>url</em> part is provided then the engine will make an attempt to load that script file before trying to find behavior class &nbsp;(if the file was not loaded already). &nbsp;</p></td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>aspect</strong></td>
              <td bgcolor="#ffe4ca">
          <div><strong>(</strong> <font color="#ff0000">&quot;functionName&quot;</font> [ <em>url(...)</em> ] <strong>) +</strong></div>
          <p> <font color="#ff0000">Only in Sciter!</font></p>
          <p>One or list of name/url pairs. Each element of the list is a full name of a function to be called for the element once in element's lifetime. The url is optional and if provided will cause script file from that url to be loaded.</p>
          <p>The <em>aspect</em> is an inheritable property in the sence that if the element has multiple style rules with aspects defined then the used value of the aspect is a list of all aspects found in matching rules.</p>
          <p>Example, these two rules:</p>
          <pre>input[click] { aspect: handleClickAttribute; }
input[focus] { aspect: handleFocusAttribute; }
</pre>
          <p>for the DOM element <code>&lt;input type=text click=&quot;...&quot; focus=&quot;...&quot;&gt;</code></p>
          <p>will cause both handleClickAttribute() <strong>and</strong> handleFocusAttribute() to be called for the element. The <em>this</em> environment value in both calls will be that element.</p></td></tr>
            <tr>
              <td rowspan="6" bgcolor="#ffe4ca" valign="top"><strong>Other attributes</strong></td>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>content</strong></td>
              <td bgcolor="#ffe4ca">
          <div><code>&quot;string&quot; | attr(attrname) | prop(propname)</code></div>
          <p>Allows to redefine textual content of the element in style. In h-smile <em>content</em> is can be applied to the element itself.</p>
          <p>If the content is a string then it is used &quot;as is&quot; to replace element's content. </p>
						<p>If it is <code>attr(attrname)</code> then content of the element is replaced by value of the attribute.</p>
						<p>And if it is <code>prop(propname)</code> then content of the element gets replaced by the value of property defined in script on the element.</p>
          <div>This allow to define different captions of some element by CSS using for example some attribute as a switch:</div>
              <pre>p.status[state=&quot;pending&quot;] { content: &quot;Pending&quot;; foreground-image:...; }
p.status[state=&quot;done&quot;] { content: &quot;Done&quot;; foreground-image:...; }
p.status[state=&quot;warning&quot;] { content: &quot;Warning!&quot;; foreground-image:...; }
</pre>
          <div><em>content</em> is applicable only to elements that allowed to have textual content. E.g. it will work for P, SPAN, etc. but not for TABLE.</div></td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>vertical-scrollbar</strong></td>
              <td bgcolor="#ffe4ca"> <font color="#ff0000">&quot;style-set-name&quot;</font> - style set name that defines styles of vertical scrollbar.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>horizontal-scrollbar</strong></td>
              <td bgcolor="#ffe4ca"> <font color="#ff0000">&quot;style-set-name&quot;</font> - style set name that defines styles of horizontal scrollbar. See: html_samples/css-plus/scrollbar-styling.htm of how is should be defined.</td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>popup-position</strong></td>
              <td bgcolor="#ffe4ca"><em>popup-reference-point</em> <em>anchor-reference-point</em> | <em>advisory-position</em>
          <p>Defines either:</p>
          <ul>
            <li>default popup position relative to the element that requested the popup (popup anchor element). Both <em>popup-reference-point</em> and <em>anchor-reference-point</em> are enumerations that accept one of following values: <br/><em>default</em> | <em>top-left |</em> <em>top-center |</em> <em>top-right</em> | <em>middle-left |</em> <em>middle-center</em> | <em>middle-right |</em> <em>bottom-left</em> | <em>bottom-center</em> | <em>bottom-right</em>.</li>
            <li>Or <em>advisory-position</em> value, one of</li>
            <ul>
              <li><em>at-tail</em> - popup appears as popup element of the &lt;select&gt; - underneath the anchor element. Or if not enough space - on top of it;</li>
              <li><em>at-head</em> - above the anchor;</li>
              <li>at-end - popup appears aside of the anchor (like secondary popup menu). Particular side is determined by available space and directionality;</li>
              <li><em>at-start</em> - normally appears on the left of anchor. For RTL direction - on the right.</li></ul></ul>
          <p>The popup-position property governs positions popups shown for &lt;select&gt; and &lt;menu&gt; for example. If defined the popup-position overrides position provided by Element.popup(el,postition) call too.</p>
          <p>Example, this declaration:</p>
          <pre>select[type=select-dropdown] &gt; popup { popup-position: top-left top-right; }
</pre>
          <p>will cause select's popup to appear on the right side of the popup, rather than underneath it. See: samples/popup/select-popup-positioning.htm</p></td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>popup-anchor-reference-point</strong><br/><strong>popup-reference-point</strong></td>
              <td bgcolor="#ffe4ca"><em>default</em> | <em>top-left |</em> <em>top-center |</em> <em>top-right</em> | <em>middle-left |</em> <em>middle-center</em> | <em>middle-right |</em> <em>bottom-left</em> | <em>bottom-center</em> | <em>bottom-right</em><br/><em>default</em> | <em>top-left |</em> <em>top-center |</em> <em>top-right</em> | <em>middle-left |</em> <em>middle-center</em> | <em>middle-right |</em> <em>bottom-left</em> | <em>bottom-center</em> | <em>bottom-right</em>
          <p>Individual parts of <strong>popup-position</strong> above.</p></td></tr>
            <tr>
              <td nowrap bgcolor="#ffe4ca" align="right"><strong>zoom</strong></td>
              <td bgcolor="#ffe4ca">% or float- zoom factor of element's <strong>content</strong>. 100% or 1.0 values designate no zoom.
          <p>NOTE: zoom in Sciter is close to IE's zoom but is different in two aspects:</p>
          <ol>
            <li><em>zoom</em> in sciter defines multiplication factor for all length values expressed in any units <strong>but not px</strong>. px units are always resolved to physical pixels.</li>
            <li>zoom defines scale of children of the element - but not element itself.</li></ol></td></tr></tbody></table></div>
  <h3>Length units</h3>
  <p>The engine supports following length units:</p>
  <ul>
    <li><strong>px</strong> - pixels, relative to the viewing device. <font color="#990033">On screen 1px is exactly one device pixel. On printer 1px is equal to 1/96 of inch.</font></li>
    <li><strong>em</strong> - the <em>font-size</em> of the relevant font;</li>
    <li><strong>ex</strong> - the <em>x-height</em> of the relevant font;</li>
    <li><strong>in</strong> - inches — 1 inch is equal to 2.54 centimeters;</li>
    <li><strong>cm</strong> - centimeters;</li>
    <li><strong>mm</strong> - millimeters;</li>
    <li><strong>pt</strong> - points — the points used by CSS 2.1 are equal to 1/72nd of an inch;</li>
    <li><strong>pc</strong> - picas — 1 pica is equal to 12 points;</li>
    <li><strong>%</strong> - percent — usually equals to precentage value of correspondent metric of parent element. But not always, see CSS specification.</li>
    <li><strong>vw</strong> - 1/100th of view (window) width;</li>
    <li><strong>vh</strong> - 1/100th of view (window) height;</li>
    <li><strong>vmin</strong> - 1/100th of view's smallest side;</li>
    <li><strong>vmax</strong> - 1/100th of view's largest view(window) size.</li>
    <li><strong> <font color="#990033">%%</font></strong><font color="#990033"> - flex (&quot;weight&quot;) — see <a href="http://sciter.com/docs/flex-flow/flex-layout.htm">h-smile flex units</a>.</font></li>
    <li><strong> <font color="#990033">*</font></strong><font color="#990033"> - flex (&quot;weight&quot;) — 1* is equal to 100%%;</font></li>
    <li><strong> <font color="#990033">dip - d</font></strong><font color="#990033">evice <strong>i</strong>ndependent <strong>p</strong>ixels - logical units. 1dip = 1/96 of inch therefore on 96DPI display this will be one pixel. On high-dpi screens it will be resolved to larger number of physical pixels. For example: 2dip will take 3px on 120DPI screen. On printer 'dip' and 'px' units are equivalent.</font></li></ul>
  
  <h4>fx() - extended flex declaration</h4>

  <p>The extended flex declaration is used in properties that accept flex units: margins, paddings and border widths. fx() function allows to define as flex as min/max caps applied to flex value:</p>

  <pre>fx(weight,min:length,max:length)</pre>  

  <p>Where <i>weight</i> is a number of <code>*</code> units and optional min and max lengths are caps limiting computed value of flexes. Example:</p>

  <pre>margin-left: fx(1,min:20dip,max:300dip);</pre>

  <p>is an equivalent of (but for margin-left):</p>

  <pre>width: 1*; min-width:20dip; max-width:300dip);</pre>

  <h3>Colors</h3>
  <p>Engine supports following forms of defining color constants:</p>
  <ul>
    <li><code>color: <strong>#f00</strong>; - #rgb form.</code></li>
    <li><code>color: <strong>#ff0000</strong> - #rrggbb form.</code></li>
    <li><code>color: <strong>#ff0000aa</strong> - #rrggbbaa form.</code></li>
    <li><code>color: <strong>rgb</strong>(255,0,0) - rgb(0..255,0..255,0..255) form.</code></li>
    <li><code>color: <strong>rgb</strong>(100%,0%,0%) - rgb(0..100%,0..100%,0..100%) form.</code></li>
    <li><code>color: <strong>rgba</strong>(255,0,0,0.5) - rgba(0..255,0..255,0..255,0..1) form.</code></li>
    <li><code>color: <strong>hsl</strong>(300,0%,0%) - hsl(0..360,0..100%,0..100%) form - HSL color space.</code></li>
    <li><code>color: <b>morph</b>(basecolor, ...)</code> - color morphing/transformation function:&nbsp;<p><i>basecolor</i> is either color constant or color variable.</p>

<p>The function accepts one of several parameters:</p>
	<ul>
<li><code>hue:Adeg</code> - creates new color by changing H (Hue)&nbsp;component of basecolor in  HSL color space. A is new angle,&nbsp;degree number 0...360&nbsp;- absolute value of H component.&nbsp;</li>
<li><code>rotate:Adeg</code> - changes H&nbsp;by relative rotation from base color, A is a rotation angle : -360deg ... +360deg.</li>
<li><code>lightness:p%</code> - creates new color by changing Lightness component of basecolor in  HSL color space. <i>p</i> is a number 0...100 - absolute value of L component.</li>
<li><code>lightness:p%</code> - creates new color by changing L (Lightness) component of basecolor in  HSL color space. <i>p</i> is a number 0...100 - absolute value of L component.</li>
<li><code>lighten:p%</code> - changes Lightness component of basecolor in HSL color space by increasing basecolor::L component. <i>p</i> is a number 0...100 - relative increment of L component.</li>
<li><code>darken:p%</code> - changes Lightness component of basecolor in HSL color space by decreasing basecolor::L component. <i>p</i> is a number 0...100 - relative decrement of L component.</li>
<li><code>saturation:p%</code> - creates new color by changing S (Saturation)&nbsp;component of basecolor in  HSL color space. <i>p</i> is a number 0...100 - absolute value of S component.</li>
<li><code>saturate:p%</code> - changes S by increasing Saturation component of basecolor in HSL color space. <i>p</i> is a number 0...100 - relative increment of S component.</li>
<li><code>desaturate:p%</code> - changes S by decreasing Saturation component of basecolor in HSL color space. <i>p</i> is a number 0...100 - relative decrement of S component.</li>
<li><code>opacity:p%</code> - creates new color by changing A (alpha)&nbsp;component of basecolor in  RGBA color space. <i>p</i> is a number 0...100 - absolute value of A component, if <code>100%</code> then color is opaque and if <code>0%</code> then color fully transparent.</li>
<li><code>opacify:p%</code> - changes A (alpha) by increasing or decreasing current A value of basecolor. <i>p</i> is a number -100%...100% - relative increment/decrement of A component.</li>
<li><code>color2,mix:p%</code> - creates color that is between basecolor and color2, <i>p</i> is a number 0%...100% - ratio of the mix. If p == 0% then result is basecolor and  if 100% - color2.</li>
<li><code>grayscale:p%</code> - converts the basecolor to grayscale. If p is 100% then result is pure grayscale color (R == G == B).&nbsp; If p is 0% then result is original basecolor.</li>
<li><code>sepia:p%</code> - converts the basecolor to sepia. If p is 100% then result is pure sepia color, if p is 0% then result is original basecolor.</li>
</ul>
</li></ul>

<h3>Custom CSS properties</h3>
  <p>Sciter (h-smile core) supports custom CSS properties. All properties with names starting with '-' are considered as custom properties. Custom properties are not inhereted from parent to child. Example of custom property declaration:</p>
  <p>p { border: 1px solid red; <strong>-custom: &quot;value&quot;;</strong> &nbsp;&nbsp;}</p>
  <p>After such a declaration all <strong>&lt;p&gt;</strong> elements will have style attribute <strong>-custom</strong> equals to &quot;value&quot;.</p>
  <p>Value of custom attribute can be either:</p>
  <ul>
    <li>
      <div>string (enclosed in &quot;&quot;), example: <em>&quot;string&quot;</em> ;</div></li>
    <li>
      <div>nmtoken, example: <em>some-token</em> ;</div></li>
    <li>
      <div>numeric value, example: <em>3.1415</em> ;</div></li>
    <li>
      <div>url, example: <em>url(http://something.com)</em>; &nbsp;</div></li>
    <li>
      <div>CSS selector, example: <em>selector(#id &gt; .cls)</em>;</div></li></ul>

<h3>Variables</h3>

  <p>Variable is declared as a property but with name wrapped into <code>var(...)</code> construct, example:</p>

  <pre>body {
  var(back-color): #ccc;
  var(text-color): #000;

  var(base-width) : 100dip; 
}</pre>

  <p>Variables are inherited from parent to child. 
     For example: if variable is declared on &lt;body&gt; element it will be available in all its children.</p>

  <p>Variables can be used in other property value declarations
     - all places where color or length units are expected by using either:</p>

  <ul>
     <li><code>var(name,defaultValue)</code> - substitutes the declaration by value of the name or, 
     if it's not declared, by the defaultValue (color or length unit)</li> 
     <li><code>length(name)</code> - substitutes the declaration by value of the name. 
         If variable with that name is not declared or is not a length result is undefined.</li> 
     <li><code>color(name)</code> - substitutes the declaration by value of the name. 
         If variable with that name is not declared or is not a color result is undefined.</li></ul>

    <p>Examples of variable use:</p>
<pre>div {
  background-color: color(back-color); /* #ccc */
  width: length(base-width); /* 100dip */
  height: var(base-height,80dip); /* 80dip as base-height was not defined */
}</pre>

  </body>
</html>